<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
</head>

<body>
    <div id="box">
        <input type="button" value="修改状态为处理中" @click="changetreating">
        <input type="button" value="修改状态为已处理完毕" @click="stauts='treated'"><br/>
        任务状态:{{stauts | toChinese("chinese")}}<br/>
        任务状态:{{stauts | toChinese("english")}}<br/>
        任务状态:{{stauts | toChinese("korean")}}<br/>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter("toChinese", function (val, type) {
            let obj = {};
            switch (type) {
                case "chinese": obj = {
                    "untreated": "未处理",
                    "treating": "处理中",
                    "treated": "已处理"
                };
                    break;
                case "english": obj = {
                    "untreated": "untreated",
                    "treating": "treating",
                    "treated": "treated"
                };
                    break;
                case "korean": obj = {
                    "untreated": "h_untreated",
                    "treating": "h_treating",
                    "treated": "h_treated"
                };
                    break;
            }

            return obj[val];
        });

        let vm = new Vue({
            el: "#box",
            data: {
                stauts: "untreated"
            },
            methods: {
                changetreating() {
                    this.stauts = "treating";
                }
            }
        });


    </script>
</body>

</html>